/*  这是放在外面的全局变量  */
// 动态渲染商品列表数据
let pageNo = 1 //页号
let allStr = '' //所有商品列表标签数据
//侧栏相关功能
let timer = null;
let isTop = true;
//获取页面的可视窗口高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

// 商品列表数据
function loadProduct(pageNo) {
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        params: {
            pageSize: 9,
            pageNo,
        },
    }).then(response => {
        // console.log(response);
        let data = response.data
        let {
            resultCode,
            resultInfo
        } = data //解构赋值
        if (resultCode == 1) {
            let list = resultInfo.list //商品列表

            showProductList(list)
        }
    })
}


// 动态渲染商品列表数据到页面

function showProductList(list) {
    let str = list
        .map(item => {
            return `<div class="div1" data-index=${item.id} onclick="onDetail(${item.id})">
                        <img src="${item.picture}"
                            alt="">
                        <p>${item.shop}</p>
                        <div class="div2">送运费险</div>
                        <span class="span2">￥</span>
                        <span class="span3">${item.price}</span>
                    </div>`
        })
        .join('')
    allStr += str
    const productListWrapper = document.querySelector('.product-img')
    productListWrapper.innerHTML = allStr

    // let productList = document.querySelector('.div1')
    // console.log( productList);
    // productList.addEventListener('click', (e) => {
    //     e = e ||window.event
    //     location.href = '../pages/details.html'
    // })
       
    

    
}

//加载更多
// 页面到达底部自动获取商品数据并渲染至页面
function onMore() {
    const moreEle = document.querySelector('.more')
    moreEle.addEventListener('click', function () {
        loadProduct(++pageNo)
    })
    window.addEventListener('scroll', function () {
        //到顶部的距离
        const scrollTopEle = document.documentElement.scrollTop;
        //页面总长度
        const scrollHeightEle = document.documentElement.scrollHeight;
        //滚动条长度
        const clientHeightEle = document.documentElement.clientHeight;

        if (scrollHeightEle - (clientHeightEle + scrollHeightEle) < 1) {
            loadProduct(++pageNo)
        }
    })

}


//通向商品详情的天梯
function onDetail(id){
    location.href = '../pages/details.html?id='+id
}


// 回到顶部
function onBack() {
    let backBtn = document.querySelector('.back-to-top')
    backBtn.onclick = function () {
        //设置定时器
        timer = setInterval(function () {
            //获取滚动条距离顶部的高度
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            //减小的速度
            let isSpeed = Math.floor(-osTop / 6);
            document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;
            //console.log( osTop + isSpeed);
            isTop = true;
            //判断，然后清除定时器
            if (osTop == 0) {
                clearInterval(timer);
            }
        }, 30);
    };

}

// 侧栏触顶消失
function asideDisappear() {
    let asideEle = document.querySelector('.aside')
    //滚动条滚动时触发
    window.onscroll = function () {
        //在滚动的时候增加判断
        let osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (osTop == 0) {
            asideEle .style.display = 'none';
        } else {
            asideEle .style.display = 'block';
        }
        if (!isTop) {
            clearInterval(timer);
        }
        isTop = false;
    };
}




loadProduct(pageNo)
onMore()
onBack()
asideDisappear()
